<template>
  <!--    <Header></Header>-->
  <div class="wrapper">
<!--    <div class="way">Home <span>></span> <span class="currentTab">Models</span></div>-->
    <div class="ems-big-title">
      <div class="ems-big-title-b">
        EXEED Models
      </div>
      <div class="ep-des">
        Introduction to EXEED Models
      </div>
    </div>
    <div class="model-content">
      <div class="model-card" v-for="(item,index) in content">
        <div class="model-img">
          <div class="model-title">
            {{item.title}}
          </div>
          <img
              :src="item.thumbnailUrl">
        </div>
        <div class="em-more-btn"  @click="$router.push(`/${item.type}/${item.id}`)">
          Show Media Contents
        </div>
      </div>
    </div>

  </div>
  <!--    <Footer></Footer>-->
</template>

<script setup lang="ts">
import type {LocationQueryValue} from "vue-router";

useHead({
  title: 'Exeed Newsroom',//网站标题
  link: [//网站link，可以在这里引入css和icon等
    {rel: 'shortcut icon', href: '/images/favicon.ico'},
    {rel: 'apple-touch-icon', href: '/images/favicon.ico'}
  ]
})

const config = useRuntimeConfig();
const apiURL = config.public.apiURL;
// const hostURL = config.public.hostURL;
const router = useRouter();

const route = useRoute()
const token = route.query.token;
// const {data: content} = await getData(token);
const content = ref();
const getData = async (token: string | null | LocationQueryValue[]) => {
  let res = token ? await useFetch(`/api/page/selectSketchPages?type=model&page=1&size=999&key=&token=${token}`) : await useFetch(`/api/page/selectPages?type=model&page=1&size=999&key=`);
  if (res.data.value.code === 200)
    if (res.data.value.data && res.data.value.data.list.length > 0){
      content.value = res.data.value.data.list;
    }
  // console.log(content.value);
}
getData(token);

</script>

<style scoped lang="scss">
.wrapper {
  background-color: #FFFFFF;
  min-height: 100%;
  width: 1920px;
  padding-top: 90px;

  .way {
    width: 1740px;
    height: 50px;
    padding: 0px 90px;
    line-height: 50px;
    vertical-align: middle;

    .currentTab {
      font-size: 16px;
      font-weight: 400;
      color: #C78E66;
    }
  }

  .ems-big-title {
    width: 100%;
    //padding-top: 100px;
    padding-left: 710px;
    //padding-bottom: 100px;

    .ems-big-title-b {
      width: 460px;
      height: 80px;
      text-align: center;
      font-size: 64px;
      font-weight: 600;
      background-image: -webkit-linear-gradient(180deg, #26B7BC 0%, #26B7BC 5%, #BB916C);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .ep-des {
      width: 460px;
      height: 80px;
      text-align: center;
    }
  }

  .model-content {
    width: 1620px;
    padding: 0px 160px;
    //display: inline-flex;
    justify-content: space-between;


    .model-card {
      display: inline-block;
      margin-right: 35px;
      margin-bottom: 40px;

      .model-img {
        //position: relative;
        //display: flex;
        width: 370px;
        height: 285px;
        overflow: hidden;

        img {
          position: relative;
          width: 350px;
          //margin: auto 10px;
          //margin:auto;
          top: 50px;
          object-fit: cover;
          transition: all 0.6s;
        }

        img:hover {
          transform: scale(1.05);
        }

        .model-title {
          position: relative;
          width: 370px;
          top:10px;
          //left: -350px;

          font-weight: 600;
          font-size: 28px;
          color: #000000;
          line-height: 32px;
          text-align: left;
          font-style: normal;
          //text-transform: none
        }
      }

      .em-more-btn {
        user-select: none;
        width: 370px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        background: rgb(199, 142, 102, 0.08);
        border-bottom: 4px solid #C78E66;
        color: #000000;
        cursor: pointer;
        transition: background-color .3s;
        font-size: 16px;
      }

      .em-more-btn:hover {
        background: rgb(199, 142, 102, 0.38);
      }
    }


  }
}
</style>
